<template>
  <div>
    <div class="from-basic">
      <a-form layout="inline" :form="form" @submit="queryUserList()">
        <a-form-item label="用户名">
          <a-input v-model="form.username" allow-clear placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @Click="queryUserList()">
            查询
          </a-button>
          <a-button @click="handleReset()">
            重置
          </a-button>
          <a-button type="primary" @click="handleAdd()">
            新增
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <div>
      <a-table
        :columns="columns"
        :data-source="data"
        size="middle"
      >
        <span slot="customTitle"><a-icon type="smile-o" /> 用户名</span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" ghost>编辑</a-button>
        </span>
      </a-table>
    </div>

    <user-form ref="modalForm" @submit="fromSubmit" />
  </div>
</template>

<script>

import { userList, addUser } from '@/api/user'
import userForm from './modules/userForm.vue'

export default {
  name: 'UserManagement',
  components: {
    userForm
  },
  data() {
    return {
      form: {
        username: ''
      },
      data: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(text, record, index) {
            return parseInt(index) + 1
          }
        },
        {
          dataIndex: 'username',
          key: 'username',
          slots: { title: 'customTitle' }
        },
        {
          title: '姓名',
          dataIndex: 'realName',
          key: 'realName'
        },
        {
          title: '性别',
          dataIndex: 'gender',
          key: 'gender',
          customRender: (text) => text === 0 ? '女' : text === 1 ? '男' : '未知'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: '联系方式',
          key: 'phone',
          dataIndex: 'phone'
        },
        {
          title: '创建时间',
          key: 'createdTime',
          dataIndex: 'createdTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created() {
    this.queryUserList()
  },
  methods: {
    queryUserList() {
      userList(this.form).then(resp => {
        if (resp.success) {
          this.data = resp.data
        }
      })
    },
    handleAdd() {
      this.$refs.modalForm.userVisible = true
    },
    handleReset() {
      this.form.username = ''
      this.queryUserList()
    },
    fromSubmit(data) {
      addUser(data).then(resp => {
        if (resp.success) {
          this.queryUserList()
          this.$refs.modalForm.handleCancel()
          this.$message.success(resp.message)
        }
      })
    }
  }
}
</script>
